<template>
  <el-form
    :model="basicForm"
    :rules="basicRules"
    ref="basicForm"
    size="small"
    label-width="150px"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="租户名称:" prop="tenantName">
          <el-input
            size="small"
            v-model="basicForm.tenantName"
            placeholder="请输入租户名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="租户类型:" prop="tenantType">
          <el-select
              class="width-100"
              size="small"
              v-model="basicForm.tenantType"
              placeholder="请选择商户类型"
            >
              <el-option
                v-for="item in tenantTypeList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系人:" prop="linkman">
          <el-input
            size="small"
            v-model="basicForm.linkman"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系电话:" prop="contactNumber">
          <el-input
            size="small"
            type="number"
            maxlength="11"
            v-model="basicForm.contactNumber"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="省份/地市/区县:" prop="provinceCityArea">
          <el-cascader
            v-if="isShow"
            class="width-100"
            v-model="basicForm.provinceCityArea"
            :options="provinceCityAreaOptions"
            :props="provinceCityAreaProps"
            placeholder="请选择省份/地市/区县"
            clearable
            filterable
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="联系地址" prop="address">
          <el-input
            size="small"
            type="textarea"
            v-model="basicForm.address"
            placeholder="请输入联系地址"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="邮箱:" prop="email">
          <el-input
            size="small"
            type="email"
            v-model="basicForm.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合作状态:" prop="isCooperate">
          <el-select
            class="width-100"
            size="small"
            v-model="basicForm.isCooperate"
            placeholder="请选择合作状态"
          >
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="item in isCooperateList"
              :key="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="分润状态:" prop="profitState">
          <el-select
            class="width-100"
            size="small"
            v-model="basicForm.profitState"
            placeholder="请选择分润状态"
          >
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="item in profitStateList"
              :key="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合同状态:" prop="cooperateState">
          <el-select
            class="width-100"
            size="small"
            v-model="basicForm.cooperateState"
            placeholder="请选择合同状态"
          >
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="item in cooperateStateList"
              :key="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="异常状态原因:" prop="exceptionMsg">
          <el-input
            size="small"
            type="text"
            v-model="basicForm.exceptionMsg"
            placeholder="请输入异常状态原因"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="绑定域名:" prop="domain">
          <el-input
            size="small"
            placeholder="请输入域名地址"
            v-model="basicForm.domain"
          >
            <!-- <template slot="prepend">https://</template> -->
            <!-- <template slot="append">.com</template> -->
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="官网地址:" prop="officialWebsite">
          <el-input
            size="small"
            type="text"
            v-model="basicForm.officialWebsite"
            placeholder="请输入官网地址"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="租户服务商编号:" prop="tenantServiceNo">
          <el-input
            size="small"
            type="text"
            v-model="basicForm.tenantServiceNo"
            placeholder="请输入租户服务商编号"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="公司名称:" prop="companyName">
          <el-input
            size="small"
            type="text"
            v-model="basicForm.companyName"
            placeholder="请输入公司名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备案名称:" prop="icpName">
          <el-input
            size="small"
            type="text"
            v-model="basicForm.icpName"
            placeholder="请输入备案名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="登录页Logo(Admin):" prop="logo">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpLogoRequest"
            :limit="1"
            :file-list="logoList"
            :on-remove="logoRemove"
            :on-exceed="bgUrlExceed"
            :before-upload="beforeUploads"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="网站Icon(Admin):" prop="webIcon">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpWebIconRequest"
            :limit="1"
            :file-list="webIconList"
            :on-remove="webIconRemove"
            :on-exceed="bgUrlExceed"
            :before-upload="beforeUploads"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="登录页图片(APP):" prop="loginImg">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpLoginImgRequest"
            :limit="1"
            :file-list="loginImgList"
            :on-remove="loginImgRemove"
            :on-exceed="bgUrlExceed"
            :before-upload="beforeUploads"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="注册页图片(APP):" prop="serviceRegisterImg">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpServiceRegisterImgRequest"
            :limit="1"
            :file-list="serviceRegisterImgList"
            :on-remove="serviceRegisterImgRemove"
            :on-exceed="bgUrlExceed"
            :before-upload="beforeUploads"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务商邀请图(APP):" prop="serviceInviteImg">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpServiceInviteImgRequest"
            :limit="1"
            :file-list="serviceInviteImgList"
            :on-remove="serviceInviteImgRemove"
            :on-exceed="bgUrlExceed"
            :before-upload="beforeUploads"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="扫码支付Logo(H5):" prop="payLogo">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpPayLogoRequest"
            :limit="1"
            :file-list="payLogoList"
            :on-remove="payLogoRemove"
            :on-exceed="bgUrlExceed"
            :before-upload="beforeUploads"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="下载页背景图(H5):" prop="downloadImg">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpDownloadImgRequest"
            :limit="1"
            :file-list="downloadImgList"
            :on-remove="downloadImgRemove"
            :on-exceed="bgUrlExceed"
            :before-upload="beforeUploads"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="二维码模型图:" prop="qrCodeImg">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpQrCodeImgRequest"
            :limit="1"
            :file-list="qrCodeImgList"
            :on-remove="qrCodeImgRemove"
            :on-exceed="bgUrlExceed"
            :before-upload="beforeUploads"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="系统背景:" prop="backgroundUrl">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpBgUrlRequest"
            :limit="1"
            :file-list="backgroundUrlList"
            :on-remove="bgUrlRemove"
            :on-exceed="bgUrlExceed"
            :before-upload="beforeUpload"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </el-form>
</template>

<script>
import { uploadPublic } from "@/api/system/oss";
import { getDictionary, getRegion } from "@/api/system/dict";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    basicForm: Object,
  },
  components: {
    ElImageViewer
  },
  data() {
    return {
      basicRules: {
        tenantName: [
          { required: true, message: "请输入租户名称", trigger: "blur" },
        ],
        tenantType: [
          { required: true, message: "请选择租户类型", trigger: "blur" },
        ],
        linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        contactNumber: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        provinceCityArea: [{ required: true, message: "请选择省份/地市/区县", trigger: "blur" }],
        address: [
          { required: true, message: "请输入联系地址", trigger: "blur" },
        ],
        isCooperate: [
          { required: true, message: "请选择合作状态", trigger: "blur" },
        ],
        profitState: [
          { required: true, message: "请选择分润状态", trigger: "blur" },
        ],
        cooperateState: [
          { required: true, message: "请选择合同状态", trigger: "blur" },
        ],
        domain: [
          { required: true, message: "请输入域名地址", trigger: "blur" },
        ],
        logo: [
          { required: true, message: "请上传logo", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        icpName: [
          { required: true, message: "请输入备案名称", trigger: "blur" },
        ],
        // backgroundUrl: [
        //   { required: true, message: "请上传系统背景", trigger: "blur" },
        // ],
      },
      tenantTypeList: [],
      provinceCityAreaOptions: [],
      provinceCityAreaProps: {
        label: "name",
        value: "code",
        lazy: true,
        lazyLoad(node, resolve) {
          let stop_level = 2;
          let level = node.level;
          let data = node.data || {};
          let code = data.code;
          let list = [];
          let callback = () => {
            resolve(
              (list || []).map((ele) => {
                return Object.assign(ele, {
                  leaf: level >= stop_level,
                });
              })
            );
          };
          if (level == 0) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 1) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 2) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else {
            callback();
          }
        },
      },
      isCooperateList: [],
      profitStateList: [],
      cooperateStateList: [],
      logoList: [],
      backgroundUrlList: [],
      webIconList: [],
      downloadImgList: [],
      loginImgList: [],
      serviceRegisterImgList: [],
      serviceInviteImgList: [],
      qrCodeImgList: [],
      payLogoList: [],
      isShow: true,
      imgShow:false,
      imgUrlList:[],
    };
  },
  computed: {},
  created() {
    this.doGetDicts();
  },
  methods: {
    /* 预览图片 */
    imgPreview(file) {
        this.imgUrlList[0] = file.url;
        this.imgShow = true;
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({code: "tenant_type"}).then((res) => {
        this.tenantTypeList = res.data.data;
      });
      getDictionary({code: "is_cooperate"}).then((res) => {
        this.isCooperateList = res.data.data;
      });
      getDictionary({code: "profit_state"}).then((res) => {
        this.profitStateList = res.data.data;
      });
      getDictionary({code: "cooperate_state"}).then((res) => {
        this.cooperateStateList = res.data.data;
      });
    },
    /* 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传 */
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 文件超出个数限制时的钩子 */
    bgUrlExceed() {
      this.$message.error("只能上传一张图片哦~");
    },
    /* 系统背景 上传 */
    httpBgUrlRequest(option) {
      uploadPublic(option.file).then((res) => {
        this.basicForm.backgroundUrl = res.data.data.link;
        this.$refs.basicForm.validateField("backgroundUrl");
      });
    },
    /* 系统背景 删除 */
    bgUrlRemove(file, fileList) {
      this.backgroundUrlList = fileList;
      this.basicForm.backgroundUrl = "";
    },
    /* logo 上传 */
    httpLogoRequest(option) {
      uploadPublic(option.file).then((res) => {
        this.basicForm.logo = res.data.data.link;
        this.$refs.basicForm.validateField("logo");
      });
    },
    /* logo 删除 */
    logoRemove(file, fileList) {
      this.logoList = fileList;
      this.basicForm.logo = "";
    },
    /* webIcon 上传 */
    httpWebIconRequest(option) {
      uploadPublic(option.file).then((res) => {
        this.basicForm.webIcon = res.data.data.link;
        this.$refs.basicForm.validateField("webIcon");
      });
    },
    /* webIcon 删除 */
    webIconRemove(file, fileList) {
      this.webIconList = fileList;
      this.basicForm.webIcon = "";
    },
    /* APP下载图 上传 */
    httpDownloadImgRequest(option) {
      uploadPublic(option.file).then((res) => {
        this.basicForm.downloadImg = res.data.data.link;
        this.$refs.basicForm.validateField("downloadImg");
      });
    },
    /* APP下载图 删除 */
    downloadImgRemove(file, fileList) {
      this.downloadImgList = fileList;
      this.basicForm.downloadImg = "";
    },
    /* APP登录图 上传 */
    httpLoginImgRequest(option) {
      uploadPublic(option.file).then((res) => {
        this.basicForm.loginImg = res.data.data.link;
        this.$refs.basicForm.validateField("loginImg");
      });
    },
    /* APP登录图 删除 */
    loginImgRemove(file, fileList) {
      this.loginImgList = fileList;
      this.basicForm.loginImg = "";
    },
    /* APP注册图 上传 */
    httpServiceRegisterImgRequest(option) {
      uploadPublic(option.file).then((res) => {
        this.basicForm.serviceRegisterImg = res.data.data.link;
        this.$refs.basicForm.validateField("serviceRegisterImg");
      });
    },
    /* APP注册图 删除 */
    serviceRegisterImgRemove(file, fileList) {
      this.serviceRegisterImgList = fileList;
      this.basicForm.serviceRegisterImg = "";
    },
    /* APP服务商邀请图 上传 */
    httpServiceInviteImgRequest(option) {
      uploadPublic(option.file).then((res) => {
        this.basicForm.serviceInviteImg = res.data.data.link;
        this.$refs.basicForm.validateField("serviceInviteImg");
      });
    },
    /* APP服务商邀请图 删除 */
    serviceInviteRemove(file, fileList) {
      this.serviceInviteImgList = fileList;
      this.basicForm.serviceInvite = "";
    },
    /* 二维码图片 上传 */
    httpQrCodeImgRequest(option) {
      uploadPublic(option.file).then((res) => {
        this.basicForm.qrCodeImg = res.data.data.link;
        this.$refs.basicForm.validateField("qrCodeImg");
      });
    },
    /* 二维码图片 删除 */
    qrCodeImgRemove(file, fileList) {
      this.qrCodeImgList = fileList;
      this.basicForm.serviceInvite = "";
    },
    /* H5扫码支付Logo 上传 */
    httpPayLogoRequest(option) {
      uploadPublic(option.file).then((res) => {
        this.basicForm.payLogo = res.data.data.link;
        this.$refs.basicForm.validateField("payLogo");
      });
    },
    /* H5扫码支付Logo 删除 */
    payLogoRemove(file, fileList) {
      this.payLogoList = fileList;
      this.basicForm.serviceInvite = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.width-100 {
  width: 100%;
}
</style>
